<!-- 新闻 -->
<template>
	<view class="Journalism">
		<u-navbar bgColor="#7bb7fd" :placeholder="true" :autoBack="true" leftIconColor="#fff" leftText="返回" leftIconSize="30rpx">
			<view class="nav-center-slot" slot="center">新闻</view>
		</u-navbar>
		<!-- 导航栏 -->
		<u-sticky bgColor="#fffafa">
			<u-tabs :list="tabList" @click="click" lineWidth="30" lineColor="#EE0A24" :activeStyle="{ color: '#EE0A24', fontWeight: 'bold' }"></u-tabs>
		</u-sticky>
		<!-- 列表 -->
		<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltolower="reachBottom" @scroll="scroll">
			<u-cell v-for="(item, index) in newsList" :key="index" @click="gotoNewsDetail(item)" style="background-color: #fafafa;">
				<u--image slot="icon" :showLoading="true" :src="item.pic" width="150px" height="80px"></u--image>
				<text slot="title" class="u-line-3 title">{{ item.title }}</text>
				<text slot="label" class="u-line-2 text">{{ item.src }} {{ item.time }}</text>
			</u-cell>
		</scroll-view>
		
		<u-toast ref="uToast" />
		<!-- 置顶按钮 -->
		<xrzp-Istop :goTop="goTop" :toTopShow='toTopShow' style="bottom: 60rpx;"></xrzp-Istop>
	</view>
</template>

<script>
import { request_channel, request_getNews } from '@/api/http.js';
export default {
	data() {
		return {
			tabList: [],
			newsList: [],
			channel: '头条',
			start: 0,
			scrollTop: 0,
			toTopShow: false,
			old: {
				scrollTop: 0
			},
			appkey: 'b0e7418fe9bef46dcb47a53374ffbef1'
		};
	},
	mounted() {
		this.getNewsType();
	},
	methods: {
		async getNewsType() {
			let data = {
				appkey: this.appkey
			};
			let res = await request_channel(data);
			res.forEach(el => {
				this.tabList.push({ name: el });
			});
			this.click(this.channel);
		},
		// 切换栏目
		async click(item) {
			this.channel = item.name;
			this.start = 0;
			let data = {
				channel: item.name,
				start: 0,
				num: 20,
				appkey: this.appkey
			};
			let res = await request_getNews(data);
			this.newsList = res.list;
			this.goTop()
		},
		// 触底加载...
		reachBottom() {
			this.start += 20;
			let data = {
				channel: this.channel,
				start: this.start,
				num: 20,
				appkey: this.appkey
			};
			request_getNews(data).then(res=>{
				if(res ){
					this.newsList =  [...this.newsList,...res.list];
				}else{
					this.$refs.uToast.show({
					    type:'error',
					    message:'到底了哦~',
					})  
				}
			})
		},
		// 滚动事件
		scroll(e) {
			this.old.scrollTop = e.detail.scrollTop
			this.toTopShow = this.old.scrollTop >= 300
		},
		goTop() {
			this.scrollTop = this.old.scrollTop
			this.$nextTick(function() {
				this.scrollTop = 0
			});
		},
		// 点击跳转
		gotoNewsDetail(item) {
			uni.setStorageSync('newsinfo', item);
			uni.navigateTo({
				url: `/pages/Home/NewsDetail`
			});
		}
	}
};
</script>

<style lang="scss" sscoped>
.Journalism {
	.nav-center-slot {
		font-size: 34rpx;
		font-weight: bold;
	}
	uni-scroll-view {
		width: 100%;
		height: calc(100vh - 200rpx);
	}
	.title{
		font-size: 32rpx;
	}
	.text{
		font-size: 26rpx;
		color: #727272;
	}
	.u-cell {
		::v-deep .u-cell__body__content {
			align-items: flex-start;
		}
		::v-deep .u-cell__left-icon-wrap{
			margin-right: 32rpx;
		}
	}
}
</style>
